import React, { useLayoutEffect, useState, useEffect } from "react";

// useLayoutEffect的语法和功能和useEffect完全一样

/*
  useLayoutEffect 与 useEffect的区别：
  - `useEffect` 是异步执行的，而`useLayoutEffect`是同步执行的。
  - `useEffect` 的执行时机是浏览器完成渲染之后，而 `useLayoutEffect` 的执行时机是浏览器把内容真正渲染到界面之前

  官方推荐一般情况下都用useEffect
  只有在需要操作dom的样式的时候，为了避免页面的抖动，可以选用useLayoutEffect
*/
const App = () => {
  const [width, setWidth] = useState(300);

  // useLayoutEffect(() => {
  //   console.log(123);
  // }, []);

  useLayoutEffect(() => {
    setWidth(600);
  }, []);

  return (
    <>
      <h2>useLayoutEffect</h2>
      <div
        style={{ width: width + "px", height: "300px", background: "red" }}
      ></div>
    </>
  );
};

export default App;
